<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import * as echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme
    import resize from './mixins/resize'
    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '280px'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartData)
            },
            setOptions(data) {
                console.log(data)
                let option = {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: '#FFFFFF',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        bottom: '0',
                        data: [
                            'TAC异常',
                            '黑名单',
                            '其他异常'
                        ]
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            startAngle: 180,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            data: [
                                { value: 46, name: 'TAC异常', itemStyle: {color: '#de7c1e'}},
                                { value: 32, name: '黑名单', itemStyle: {color: '#f7b344'}},
                                { value: 22, name: '其他异常', itemStyle: {color: '#ef6543'}}

                            ]
                        }
                    ]
                };

                const chart = this.chart

                chart.setOption(option)
                chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 1,
                    dataIndex: 1
                })

                chart.on('mouseover', function(e) {
                    //当检测到鼠标悬停事件，取消默认选中高亮
                    chart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 1,
                        dataIndex: 1
                    });
                    //高亮显示悬停的那块
                    chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 1,
                        dataIndex: e.dataIndex
                    });
                });

                //检测鼠标移出后显示之前默认高亮的那块
                chart.on('mouseout', function() {
                    chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 1,
                        dataIndex: 1
                    });
                });

            }
        }
    }
</script>

